<script lang="ts">
import { defineComponent, toRaw } from "vue";
import { previewImage } from "@/utils/meida";

export default defineComponent({
  props: {
    info: { type: Object, required: true },
  },
  setup(props) {
    const imgClick = (index: number) => {
      previewImage(
        toRaw(props.info).file_list.map((i: any) => i.file_url),
        index
      );
    };
    return { imgClick };
  },
});
</script>

<template>
  <view class="comment-item">
    <image class="comment-item-avatar" :src="info.head_img" mode="aspectFill" />
    <view class="comment-item-name">{{ info.nickname }}</view>
    <view style="display: flex">
      <view class="comment-item-score">
        <image
          class="comment-item-score2"
          src="@/package/guider/static/detail-comment-score.png"
        />
        <view class="comment-item-score3">
          {{ info.totality }}<text class="comment-item-score4">分</text>
        </view>
      </view>
    </view>
    <view class="comment-item-date">
      出行日期：{{ info.trip_date }} | 评价日期：{{ info.cdate }}
    </view>
    <view class="comment-item-data">
      <view class="comment-item-data2">讲者评价：{{ info.totality }}</view>
      <view class="comment-item-data2">行程安排：{{ info.trip }}</view>
      <view class="comment-item-data2">
        性价比：{{ info.cost_performance }}
      </view>
    </view>
    <view class="comment-item-content">{{ info.content }}</view>
    <view
      class="comment-item-img"
      v-if="info.file_list && info.file_list.length > 0"
    >
      <view
        class="comment-item-img2"
        :style="{ marginLeft: d === 0 ? 0 : '' }"
        v-for="(i, d) of info.file_list"
        :key="i.id"
      >
        <template v-if="d < 4">
          <image
            class="comment-item-img3"
            :src="i.file_url"
            mode="aspectFill"
            @click="imgClick(d)"
          />

          <view
            class="comment-item-img4"
            v-if="info.file_list.length > 4 && d == 3"
            @click="imgClick(4)"
          >
            <view class="comment-item-img5">查看更多</view>
            <view class="comment-item-img6">
              +{{ info.file_list.length - 4 }}
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.comment-item {
  position: relative;
  padding: 30rpx;

  .comment-item-avatar {
    position: absolute;
    left: 30rpx;
    top: 30rpx;
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
  }

  .comment-item-name {
    margin-left: 108rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    line-height: 44rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .comment-item-score {
    position: relative;
    margin-left: 108rpx;
    margin-bottom: 24rpx;
  }

  .comment-item-score2 {
    display: block;
    width: 84rpx;
    height: 40rpx;
  }

  .comment-item-score3 {
    position: absolute;
    left: 50%;
    top: 0;
    padding-left: 6rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
    font-weight: bold;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .comment-item-score4 {
    font-size: 20rpx;
    color: #ffffff;
    line-height: 28rpx;
    font-weight: 400;
  }

  .comment-item-date {
    margin-bottom: 24rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 42rpx;
  }

  .comment-item-data {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rpx;
  }

  .comment-item-data2 {
    padding: 0 20rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    font-size: 24rpx;
    color: #61441c;
    line-height: 58rpx;
    border-radius: 30rpx;
    background-color: #feeed2;
  }

  .comment-item-content {
    font-size: 28rpx;
    color: #333333;
    line-height: 52rpx;
  }

  .comment-item-img {
    position: relative;
    display: flex;
    margin-top: 30rpx;
  }

  .comment-item-img2 {
    position: relative;
    margin-left: 8rpx;
  }

  .comment-item-img3 {
    display: block;
    width: 166rpx;
    height: 166rpx;
    border-radius: 20rpx;
  }

  .comment-item-img4 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .comment-item-img5 {
    font-size: 24rpx;
    color: #ffffff;
    line-height: 34rpx;
  }

  .comment-item-img6 {
    font-size: 28rpx;
    color: #ffffff;
    line-height: 40rpx;
  }
}
</style>
